<div class="test-page">
  <h1>Contrast Test Page</h1>
  <p>Test all button types and tabs for proper contrast in both light and dark themes</p>

  <!-- Tabs Section -->
  <section class="test-section">
    <h2>Tabs</h2>
    <mat-tab-group>
      <mat-tab label="First Tab">
        <div class="tab-content">
          <p>This is the first tab content</p>
        </div>
      </mat-tab>
      <mat-tab label="Second Tab">
        <div class="tab-content">
          <p>This is the second tab content</p>
        </div>
      </mat-tab>
      <mat-tab label="Third Tab">
        <div class="tab-content">
          <p>This is the third tab content</p>
        </div>
      </mat-tab>
    </mat-tab-group>
  </section>

  <!-- Text Buttons (mat-button) -->
  <section class="test-section">
    <h2>Text Buttons (mat-button)</h2>
    <div class="button-row">
      <button mat-button>Basic</button>
      <button
        mat-button
        color="primary"
      >
        Primary
      </button>
      <button
        mat-button
        color="accent"
      >
        Accent
      </button>
      <button
        mat-button
        color="warn"
      >
        Warn
      </button>
      <button
        mat-button
        disabled
      >
        Disabled
      </button>
    </div>
  </section>

  <!-- Raised Buttons (mat-raised-button) -->
  <section class="test-section">
    <h2>Raised Buttons (mat-raised-button)</h2>
    <div class="button-row">
      <button mat-raised-button>Basic</button>
      <button
        mat-raised-button
        color="primary"
      >
        Primary
      </button>
      <button
        mat-raised-button
        color="accent"
      >
        Accent
      </button>
      <button
        mat-raised-button
        color="warn"
      >
        Warn
      </button>
      <button
        mat-raised-button
        disabled
      >
        Disabled
      </button>
    </div>
  </section>

  <!-- Stroked Buttons (mat-stroked-button) -->
  <section class="test-section">
    <h2>Stroked Buttons (mat-stroked-button)</h2>
    <div class="button-row">
      <button mat-stroked-button>Basic</button>
      <button
        mat-stroked-button
        color="primary"
      >
        Primary
      </button>
      <button
        mat-stroked-button
        color="accent"
      >
        Accent
      </button>
      <button
        mat-stroked-button
        color="warn"
      >
        Warn
      </button>
      <button
        mat-stroked-button
        disabled
      >
        Disabled
      </button>
    </div>
  </section>

  <!-- Flat Buttons (mat-flat-button) -->
  <section class="test-section">
    <h2>Flat Buttons (mat-flat-button)</h2>
    <div class="button-row">
      <button mat-flat-button>Basic</button>
      <button
        mat-flat-button
        color="primary"
      >
        Primary
      </button>
      <button
        mat-flat-button
        color="accent"
      >
        Accent
      </button>
      <button
        mat-flat-button
        color="warn"
      >
        Warn
      </button>
      <button
        mat-flat-button
        disabled
      >
        Disabled
      </button>
    </div>
  </section>

  <!-- Icon Buttons (mat-icon-button) -->
  <section class="test-section">
    <h2>Icon Buttons (mat-icon-button)</h2>
    <div class="button-row">
      <button mat-icon-button>
        <mat-icon>home</mat-icon>
      </button>
      <button
        mat-icon-button
        color="primary"
      >
        <mat-icon>favorite</mat-icon>
      </button>
      <button
        mat-icon-button
        color="accent"
      >
        <mat-icon>settings</mat-icon>
      </button>
      <button
        mat-icon-button
        color="warn"
      >
        <mat-icon>delete</mat-icon>
      </button>
      <button
        mat-icon-button
        disabled
      >
        <mat-icon>block</mat-icon>
      </button>
    </div>
  </section>

  <!-- FAB Buttons -->
  <section class="test-section">
    <h2>FAB Buttons (mat-fab / mat-mini-fab)</h2>
    <div class="button-row">
      <button mat-fab>
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-fab
        color="primary"
      >
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-fab
        color="accent"
      >
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-fab
        color="warn"
      >
        <mat-icon>add</mat-icon>
      </button>
    </div>
    <div
      class="button-row"
      style="margin-top: 16px"
    >
      <button mat-mini-fab>
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-mini-fab
        color="primary"
      >
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-mini-fab
        color="accent"
      >
        <mat-icon>add</mat-icon>
      </button>
      <button
        mat-mini-fab
        color="warn"
      >
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </section>
</div>
